<template>
  <div class="NavBar">
     <ul class="navList">
      <li v-for="(item,index) in navs" :key="item.img">
        <router-link :to="item.url">
          <img :src="require(`@/assets/image/${item.img}`)" alt="">
          <span>{{item.text}}</span>
        </router-link>
        <router-view></router-view>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
        navs:[
          {
            text:"酒店",
            img: "logo1.png",
            url:''
          },
          {
            text:"机票",
            img: "flight.png",
            url:''
          },
          {
            text:"火车票",
            img: "train.png",
            url:''
          },
          {
            text:"度假",
            img: "package.png",
            url:''
          },
          {
            text:"景点门票",
            img: "piao.png",
            url:''
          },
          {
            text:"海外酒店",
            img: "out.png",
            url:''
          },
          {
            text:"低价机票",
            img: "lowPrice.png",
            url:''
          },
          {
            text:"汽车票船票",
            img: "card.png",
            url:''
          },
          {
            text:"自由行",
            img: "ziyou.png",
            url:''
          },
          {
            text:"攻略",
            img: "gonglue.png",
            url:''
          },
          {
            text:"民宿客栈",
            img: "01d2f57f920666364197a850dab859a8.png",
            url:''
          },
          {
            text:"专车自驾",
            img: "83af731055e121a3251690b225327b56.png",
            url:''
          },
          {
            text:"赚钱-信用卡",
            img: "5b6737be49ca243072ca614f07803b83.png",
            url:''
          },
          {
            text:"旅游团购",
            img: "1e107321f5396ea4994cd832232ecf8a.png",
            url:''
          },
          {
            text:"一日游",
            img: "c65b3bb7571a6bd62df669213e44b84d.png",
            url:''
          },
          {
            text:"特惠酒店",
            img: "f6bb08a239ce1b038204120a8d1e4669.png",
            url:''
          },
          {
            text:"借钱",
            img: "3a08f360e958ccb2b947049387873ace.png",
            url:''
          },
          {
            text:"白金卡",
            img: "19b4f6d2fabd617789fa5aad65b249da.png",
            url:''
          },
          {
            text:"行程设计",
            img: "734c3c62d2adce02.png",
            url:''
          },
          {
            text:"周末游",
            img: "25e3b9f17a21a6e0113c57a23ffccde4.png",
            url:''
          }
        ]
      }
    },
    name: 'NavBar'
  }
</script>

<style scoped lang="less">
.NavBar {
  padding: .2rem 0;
  background-color: #fff;
}
  .navList {
    display: flex;
    padding: 0;
    flex-flow: row wrap;
    justify-content: space-evenly;
    li {
      width: 20%;
      a {
        display: flex;
      align-items: center;
      flex-direction: column;
        img {
          width: 70%;
        }
      }
    }
  }
</style>